<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <script>
    const coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports(
        'top: env(a)') || CSS.supports('top: constant(a)'));
    document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
        + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
  </script>
  <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css"/>
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: white;
  }

  .appHomePage .loading {
    position: absolute;
    top: 41%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }

  .appHomePage .loading p {
    font-size: 14px;
    margin-top: 20px;
    color: black;
  }

  .appHomePage .icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 6px solid #2196f3;
    border-bottom: 6px solid transparent;
    transform: rotate(0deg);
    animation: myRotate linear 0.8s infinite;
    display: inline-block;
  }

  @keyframes myRotate {
    100% {
      transform: rotate(360deg);
    }
  }
</style>
<body>
<noscript>
  <strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app" class="appHomePage">
  <div class="loading">
    <div class="icon"></div>
    <p>拼命加载中...</p>
  </div>
</div>
</body>
</html>